// 直播
import React, { PureComponent } from 'react';
import videojs from 'video.js'
// 引入折叠面板框架
import { message, Button } from 'antd'
// 引入视频框架的专属样式
import "video.js/dist/video-js.css";
// 引入自己的专属样式
import './TVlive.scss'
let CCTVHD = ['CCTV-1高清', 'CCTV-2高清', 'CCTV-3高清', 'CCTV-4高清', 'CCTV-5高清', 'CCTV-6高清', 'CCTV-7高清', 'CCTV-8高清', 'CCTV-9高清', 'CCTV-10高清', 'CCTV-12高清', 'CCTV-14高清', 'CCTV-17高清', 'CGTV高清', 'CGTV DOC高清', 'CHC高清电影', '北京卫视高清', '北京文艺高清', '北京影视高清', '北京新闻高清', '北京冬奥纪实高清', '湖南卫视高清', '浙江卫视高清', '江苏卫视高清', '东方卫视高清', '安徽卫视高清', '黑龙江卫视高清', '辽宁卫视高清', '深圳卫视高清', '广东卫视高清', '天津卫视高清', '湖北卫视高清', '山东卫视高清', '重庆卫视高清', '上海纪实高清', '金鹰纪实高清', '福建东南卫视高清', '四川卫视高清', '河北卫视高清', '江西卫视高清', '河南卫视高清', '广西卫视高清', '吉林卫视高清', '海南卫视高清', '贵州卫视高清'];

let CCTVHDURL = ['http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8', 'https://cctvtxyh5ca.liveplay.myqcloud.com/live/cctvamerica_2/index.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv7hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv9hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv10hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv12hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv14hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cctv17hd.m3u8', 'http://ivi.bupt.edu.cn/hls/cgtnhd.m3u8', 'http://ivi.bupt.edu.cn/hls/cgtndochd.m3u8', 'http://ivi.bupt.edu.cn/hls/chc.m3u8', 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8', 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8', 'http://ivi.bupt.edu.cn/hls/btv4hd.m3u8', 'http://ivi.bupt.edu.cn/hls/btv9hd.m3u8', 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8', 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8', 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8', 'http://ivi.bupt.edu.cn/hls/jshd.m3u8', 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8', 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8', 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8', 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8', 'http://ivi.bupt.edu.cn/hls/szhd.m3u8', 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8', 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8', 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8', 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8', 'http://ivi.bupt.edu.cn/hls/cqhd.m3u8', 'http://ivi.bupt.edu.cn/hls/docuchina.m3u8', 'http://ivi.bupt.edu.cn/hls/gedocu.m3u8', 'http://ivi.bupt.edu.cn/hls/dnhd.m3u8', 'http://ivi.bupt.edu.cn/hls/schd.m3u8', 'http://ivi.bupt.edu.cn/hls/hebhd.m3u8', 'http://ivi.bupt.edu.cn/hls/jxhd.m3u8', 'http://ivi.bupt.edu.cn/hls/hnhd.m3u8', 'http://ivi.bupt.edu.cn/hls/gxhd.m3u8', 'http://ivi.bupt.edu.cn/hls/jlhd.m3u8', 'http://ivi.bupt.edu.cn/hls/lyhd.m3u8', 'http://ivi.bupt.edu.cn/hls/gzhd.m3u8'];

export default class TVlive extends PureComponent {
  constructor(props) {
    super(props);
    this.player = null
    this.state = {
      // 被选中元素的下标
      index: 0
    }
  }
  componentWillUnmount () {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  componentDidMount () {
    document.title = '正在播放：CCTV-1高清';
    this.player = videojs("video");
    this.player.controls(true)
    this.player.src('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8')
    this.player.load(
      this.player.play().catch(() => {
        message.info({ content: '网络较差', className: 'bulletChatMessage' })
      })
    )
  }
  // CCTV高清  点击按钮切换频道
  TvHDlive = (index) => {
    // 改变下标
    this.setState({
      index
    })
    document.title = `正在播放：${CCTVHD[index]}`;
    this.player.src(CCTVHDURL[index]);
    this.player.load(
      this.player.play().catch(() => {
        message.info({ content: '网络较差', className: 'bulletChatMessage' })
      })
    )
  }
  // 设置class样式
  getClass = (int) => {
    let { index } = this.state;
    if (int === index) {
      return 'TVlive_body_li border';
    }
    return 'TVlive_body_li';
  }
  render () {
    return (
      <div className='TVlive'>
        <video id="video" className="video-js vjs-default-skin video" ></video>
        <h2>高清直播频道</h2>
        <div className='TVlive_body'>
          {
            CCTVHD.map((list, index) => {
              return (
                <Button className={this.getClass(index)} onClick={() => this.TvHDlive(index)} key={index} type='text'>
                  {list}
                </Button>
              )
            })
          }
        </div>
        {/* 底部警告 */}
        <div className='TVlive_botton'>
          <p>直播信息收集自互联网</p>
          <p>直播无法播放请刷新网页</p>
          <p>用户恶意使用所产生的纠纷和本网站无关</p>
        </div>
      </div>
    )
  }
}